<template>
	<view class="content">
		<view class="top-bar">
			<view class="search-div">
				<image src="../../static/images/search/search@2x.png" class="search-img" @tap="searchUser()"></image>
				<input type="search" placeholder="搜索用户/群" class="search"  v-model="searchInfo" placeholder-style="color:#aaa;font-weight:400;" @input="searchUser()" />
			</view>
			<view class="top-bar-right" @tap="back">
			<view class="text">
				取消
			</view>
			</view>
		</view>
		<view class="main">
			<view class="search-user result">
				<view class="title" v-if="userArr.length>0">
					用户
				</view>
				<view class="list user" v-for="(item,index) in userArr" :key="index" >
					<image :src="item.profilePhoto" @tap="toLookUserInfo(item.tip,item.username)" ></image>
					<view class="names" @tap="toLookUserInfo(item.tip,item.username)">
						<view class="name" >
							{{item.nickname}}
						</view>
						<view class="email" v-html="item.selected">
							{{item.username}}
						</view>
					</view>
					<view class="right-btn send" v-if="item.tip == 1" @tap="sendMessage(item.username,item.nickname)">
						发消息
					</view>
					<view class="right-btn add" v-else @tap="toLookUserInfo(item.tip,item.username)">
						加好友
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import datas from "../../commons/js/data.js"
	import request from '../../api/request.js';
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				searchInfo:'',
				userArr:[]
			};
		},
		onLoad() {
		
		},
		watch:{
			// 监听好友的改变
			getFriends: {
				deep: true, //深度监听设置为 true
				handler(val, oldVal) {
					this.getAlphabet();
				}
			}
		},
		computed: {
			...mapGetters(['getFriends'])
		},
		methods: {
			//获取关键词
		async searchUser(){
			if(this.searchInfo!=null){
				let res = await request({
					url: '/user/get/'+this.searchInfo,
					method: 'GET'
				});
				res = res[1].data;
				console.log(res)
				this.userArr = [];
				let arr = res.data;
				let exp = eval("/"+this.searchInfo+"/g")
				if(this.searchInfo.length>0)
				for(let i=0;i<arr.length;i++){
					// console.log(arr[i].name)
					if(arr[i].username.search(this.searchInfo)!=-1){
						this.isFriend(arr[i]);
						arr[i].selected = arr[i].username.replace(exp,"<span style='color:#54AFFF;'>"+this.searchInfo+"</span>");
						this.userArr.push(arr[i]);
					}
				}
			}
				
				// console.log(this.userArr[0]);
			},
			//判断是否为好友
			isFriend(e){
				let tip = 0;
				let arr = this.$store.state.friends;
				for(let i=0;i<arr.length;i++){
					if(arr[i].username == e.username){
						tip = 1;
					}
				}
				e.tip = tip
				console.log(e.tip)
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toLookUserInfo(tip,username){
				if(tip != 1){
					uni.navigateTo({
						url:"../userInfo/userInfo?isFriend=no&username="+username
					})
				}
				else{
					uni.navigateTo({
						url:"../userInfo/userInfo?isFriend=yes&username="+username
					})
				}
			},
			//发送消息
			sendMessage(username,nickname){
				uni.navigateTo({
					url:"../chartroom/chartroom?from="+uni.getStorageSync("userInfo").username+"&to="+username+"&nickname="+nickname+"&chatType=private",
				})
			},
		async sendAddFriendRequest(){
				let res = await request({
					url: '/friend/request/add',
					data: {
						userName:"312312",
						friendName:uni.getStorageSync("userInfo").username,
						message:"请求加为好友!",
						//time:new Date()
					},
					method: 'POST'
				});
				res = res[1].data;
				let newMessage =	{
									chatType: '好友请求',
									fromUser: uni.getStorageSync("userInfo").username,
									id: "0",
									messageContent:"可以加个好友吗？",
									messageType: 1,  //区分是  0  聊天信息  还是   1  好友请求
									profilePhoto: null,
									sendTime: new Date(),
									toUser: "luowenyang"
								}
				var Msg = {
				    "message": newMessage,
				    "username": uni.getStorageSync("userInfo").username,
				    "to": "luowenyang"
				};
				console.log("发送的信息为：",Msg)
				this.$store.dispatch('webSocketSend', Msg);
			},

		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	// .content{
	// 	margin-top: 1000rpx;
	// }
	.text{
		font-family: PingFangSC-Medium;
		padding-top: 20rpx;
		padding-right: 15rpx;
	}
	.top-bar{
		border-bottom: 1px solid $uni-border-color;
		.search-div{
			// margin-top: env(safe-area-inset-top);
			margin-top:var(--status-bar-height);
			position: absolute;
			top:0;
			left: 0;
			// background-color: #eee;
			width: 100%;
			z-index: -1;
			box-sizing: border-box;
			padding: 14rpx 118rpx 14rpx 32rpx;
		}
		.search{
			padding: 0 60rpx 0 12rpx;
			height: 60rpx;
			background: $uni-bg-color-grey;
			border-radius: 5px;
		}
			
		.search-img{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 130rpx;
			top:20rpx
		}
	}
	.main{
		padding: 88rpx $uni-spacing-col-base;
		.result{
			padding-top: 32rpx;
			.title{
				font-family: PingFangSC-Semibold;
				font-size: 44rpx;
				color: #272832;
				font-weight: 600;
				line-height: 60rpx;
			}
			.list{
				width: 100%;
				height: 80rpx;
				padding: 20rpx 0;
				image{
					float: left;
					width: 80rpx;
					height: 80rpx;
					border-radius: 10px;
				}
			}
			.names{
				padding-left: $uni-spacing-col-base;
				float: left;
			}
			.name{
				font-family: PingFangSC-Regular;
				font-size: 36rpx;
				color: $uni-text-color;
				line-height: 50rpx;
			}
			.email{
				font-family: PingFangSC-Regular;
				font-size: $uni-font-size-sm;
				line-height: 28rpx;
				
			}
			.right-btn{
				float: right;
				width: 120rpx;
				height: 48rpx;
			
				border-radius: 24rpx;
				font-family: PingFangSC-Regular;
				font-size: $uni-font-size-sm;
				line-height: 48rpx;
				text-align: center;
				margin-top: 16rpx;
			}
			.send{
					background: #FFE431;
					color: $uni-text-color;
			}
			.add{
				background: rgba(74,170,255,0.10);
				color: #4AAAFF;
			}
		}
		
	}

</style>
